<template>
  <div class="local-weather">
    <a href="">
      <div class="logo">
        <i
          class="iconfont icon-taiyang"
          style="font-size: 40px; color: white; margin-right: 10px"
        ></i>
        <span style="font-size: 24px; color: white">新中地天气</span>
      </div>
    </a>
    <div class="weather">
      <span>{{ city }}</span>
      <div class="weather-info" v-if="weather">
        <div>
          实时天气: <span>{{ weather.weather }}</span>
          <span>{{ weather.temperature }}℃</span>
        </div>
        <div>
          <span>{{ weather.winddirection }}风</span>
          <span>{{ weather.windpower }}级</span>
        </div>
      </div>
    </div>
    <div class="alert-icon">
      <i
        class="iconfont icon-guanyu"
        style="font-size: 30px"
        @click="handleClick"
      ></i>
      <i
        class="iconfont icon-jia"
        v-if="route.name === 'about'"
        @click="save"
        style="
          font-size: 20px;
          color: white;
          margin-left: 10px;
          vertical-align: 3px;
        "
      ></i>
    </div>
  </div>

  <div class="alert-text" v-if="isShow">
    <div class="content">
      <span class="font1">关于: </span>
      <br />
      <span class="font2"> 这个应用可以用来追踪你选择城市的当前天气 </span>
      <br />
      <span class="font1"> 如何使用: </span>
      <br />
      <span class="font2">
        1.点击搜索框输入你希望追踪的城市 <br />
        2.在搜索结果中选中一个城市，你将获取当地最新的天气 <br />
        3.点击右侧的＋号可以将追踪城市的天气情况保存在首页
      </span>
      <br />
      <span class="font1">移除城市:</span>
      <br />
      <span class="font2">
        如果你不想在首页关注某个城市,可以通过底部的按钮删除它
      </span>
      <br />
      <button @click="handleClick" class="close-btn">关闭</button>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, defineEmits } from "vue";
import { getLocation, getWeather } from "../api/index.js";
import { useRoute } from "vue-router"; // 引入useRoute
import { storeToRefs } from "pinia";
import { useWeatherStore } from "../stores/weatherStore.js";
import { useAdcode } from "../stores/localcity.js";
const store = useWeatherStore();
const { adcode } = storeToRefs(store);
const adcodeStore = useAdcode();



const route = useRoute();
const city = ref();
const cityAdcode1 = ref("");
const weather = ref();
const isShow = ref(false);

const handleClick = () => {
  isShow.value = !isShow.value;
};

const save = () => {
  // 获取现有的保存的城市列表
  const savedCities = JSON.parse(localStorage.getItem("savedCities")) || [];

  // 检查是否已经保存过该城市
  if (!savedCities.includes(adcode.value)) {
    // 将新的adcode添加到数组中
    savedCities.push(adcode.value);
    // 保存更新后的数组
    localStorage.setItem("savedCities", JSON.stringify(savedCities));
    // 清空pinia store中的数据
    store.$reset();
  }
};

onMounted(async () => {
  const res = await getLocation();
  console.log(res);
  city.value = res.city;
  cityAdcode1.value = res.adcode;
  adcodeStore. setCityAdcode(cityAdcode1.value);
  console.log(cityAdcode1.value);
  const weatherRes = await getWeather(cityAdcode1.value);
  console.log(weatherRes);
  weather.value = weatherRes.lives[0];
  console.log(weather.value);
});
</script>

<style scoped lang="scss">
@import url("https://at.alicdn.com/t/c/font_4871851_ttyi8tjjfdb.css");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.local-weather {
  position: fixed; /* 固定定位 */
  top: 0; /* 固定在顶部 */
  left: 0;
  width: 100%;
  height: 80px;
  background-color: #00668a;
  padding: 24px 160px;
  display: flex;
  align-items: center;
  a {
    text-decoration: none;
    .logo {
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
  .weather {
    display: flex;
    font-size: 20px;
    color: white;
    margin-left: 20px;

    .weather-info {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-left: 20px;
      gap: 10px;
      font-size: 16px;
    }
  }
  .alert-icon {
    margin-left: auto;
    .icon-guanyu {
      transition: all 0.8s ease;
      color: white;
      &:hover {
        color: rgb(4, 61, 82);
      }
    }
  }
}
.alert-text {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(189, 189, 189, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;

  .content {
    width: 350px;
    // height: 350px;
    background-color: white;
    transform: translateY(-20px);
    padding: 20px;
    .font1 {
      margin-top: 10px;
      font-size: 18px;
      font-weight: bold;
    }
    .font2 {
      font-size: 14px;
    }
    .close-btn {
      background-color: #00668a;
      color: white;
      border: none;
      border-radius: 5px;
      padding: 5px 10px;
      margin-top: 20px;
    }
  }
}
</style>
